<template>
	<view class="dashboard-container">
		<!-- 顶部标题 -->
		<view class="header animate__animated animate__fadeInDown">
			<text class="title">零食管理系统</text>
			<text class="subtitle">让零食管理更简单</text>
		</view>
		<!-- 功能入口 -->
		<view class="function-grid animate__animated animate__fadeInUp animate__delay-0.7s">
			<view class="function-card" @click="navigateTo('snake')">
				<view class="card-icon" style="background-color: #4a8fe7;">
					<uni-icons type="list" size="28" color="#fff"></uni-icons>
				</view>
				<text class="card-title">零食管理</text>
				<text class="card-desc">查看/编辑零食信息</text>
			</view>

			<view class="function-card" @click="navigateTo('order')">
				<view class="card-icon" style="background-color: #6a5acd;">
					<uni-icons type="paperplane" size="28" color="#fff"></uni-icons>
				</view>
				<text class="card-title">订单管理</text>
				<text class="card-desc">查看历史订单</text>
			</view>

			<view class="function-card" @click="navigateTo('revenue')">
				<view class="card-icon" style="background-color: #ff9f43;">
					<uni-icons type="wallet" size="28" color="#fff"></uni-icons>
				</view>
				<text class="card-title">收益分析</text>
				<text class="card-desc">查看收益报表</text>
			</view>

			<view class="function-card" @click="navigateTo('statistics')">
				<view class="card-icon" style="background-color: #2ecc71;">
					<uni-icons type="stats-bars" size="28" color="#fff"></uni-icons>
				</view>
				<text class="card-title">销售统计</text>
				<text class="card-desc">查看销售数据</text>
			</view>
		</view>
		<!-- 数据看板 -->
		<view class="data-board animate__animated animate__fadeIn animate__delay-0.3s">
			<!-- 总收益卡片 -->
			<view class="data-card">
				<view class="card-content">
					<uni-icons type="wallet" size="28" color="#4a8fe7"></uni-icons>
					<text class="card-title">总收益</text>
					<text class="card-value">¥{{formatNumber(totalRevenue)}}</text>
					<text class="card-change" :class="{'positive': revenueChange >= 0, 'negative': revenueChange < 0}">
						{{revenueChange >= 0 ? '+' : ''}}{{revenueChange}}%
					</text>
				</view>
				<view class="card-wave">
					<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
						<path
							d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.21,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
							opacity=".25" fill="#4a8fe7"></path>
					</svg>
				</view>
			</view>

			<!-- 今日销量卡片 -->
			<view class="data-card">
				<view class="card-content">
					<uni-icons type="cart" size="28" color="#6a5acd"></uni-icons>
					<text class="card-title">今日销量</text>
					<text class="card-value">{{todaySales}}</text>
					<text class="card-change" :class="{'positive': salesChange >= 0, 'negative': salesChange < 0}">
						{{salesChange >= 0 ? '+' : ''}}{{salesChange}}%
					</text>
				</view>
				<view class="card-wave">
					<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
						<path
							d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.21,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
							opacity=".25" fill="#6a5acd"></path>
					</svg>
				</view>
			</view>

			<!-- 热门商品卡片 -->
			<view class="data-card">
				<view class="card-content">
					<uni-icons type="star" size="28" color="#ff9f43"></uni-icons>
					<text class="card-title">热门商品</text>
					<text class="card-value">{{hotItem.name}}</text>
					<text class="card-subvalue">销量: {{hotItem.sales}}</text>
				</view>
				<view class="card-wave">
					<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
						<path
							d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.21,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
							opacity=".25" fill="#ff9f43"></path>
					</svg>
				</view>
			</view>
		</view>

		<!-- 销售图表 -->
		<view class="chart-container animate__animated animate__fadeIn animate__delay-0.5s">
			<view class="chart-header">
				<text class="chart-title">近7日销售趋势</text>
				<picker mode="date" fields="month" @change="changeDateRange">
					<text class="chart-date">{{currentDateRange}}</text>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</picker>
			</view>
			<qiun-data-charts type="mount" :chartData="chartData" :animation="true" />
		</view>



		<!-- 底部装饰 -->
		<view class="footer-wave">
			<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
				<path
					d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.21,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
					opacity=".1" fill="#4a8fe7"></path>
			</svg>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟数据
				totalRevenue: 12580.50,
				revenueChange: 12.5,
				todaySales: 156,
				salesChange: 8.3,
				hotItem: {
					name: '巧克力薯片',
					sales: 89
				},
				currentDateRange: '本月',
				chartData: {
					categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					series: [{
							name: '销售额',
							data: [1200, 1450, 1800, 2100, 2500, 3200, 2800],
							color: '#4a8fe7'
						},
						{
							name: '订单量',
							data: [45, 52, 68, 72, 85, 110, 95],
							color: '#6a5acd'
						}
					]
				}
			}
		},
		methods: {
			formatNumber(num) {
				return num.toLocaleString('zh-CN', {
					minimumFractionDigits: 2,
					maximumFractionDigits: 2
				});
			},
			changeDateRange(e) {
				this.currentDateRange = e.detail.value || '本月';
				// 这里可以添加根据日期范围更新图表数据的逻辑
			},
			navigateTo(page) {
				const routes = {
					'snake': '/pages/snakeList/snakeList',
					'order': '/pages/snackOrder/snackOrder',
					'revenue': '/pages/revenue/index',
					'statistics': '/pages/statistics/index'
				};
				uni.navigateTo({
					url: routes[page]
				});
			}
		}
	}
</script>

<style lang="scss">
	@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");

	.dashboard-container {
		padding: 20px;
		background-color: #f5f7fa;
		min-height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.header {
		margin-bottom: 25px;
		text-align: center;

		.title {
			font-size: 24px;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 5px;
		}

		.subtitle {
			font-size: 14px;
			color: #666;
			letter-spacing: 2px;
		}
	}

	.data-board {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 15px;
		margin-bottom: 25px;
	}

	.data-card {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		overflow: hidden;
		position: relative;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		}

		.card-content {
			padding: 20px;
			position: relative;
			z-index: 2;

			.card-title {
				display: block;
				font-size: 14px;
				color: #666;
				margin-top: 10px;
			}

			.card-value {
				display: block;
				font-size: 24px;
				font-weight: bold;
				color: #333;
				margin: 8px 0;
			}

			.card-subvalue {
				display: block;
				font-size: 12px;
				color: #999;
			}

			.card-change {
				display: inline-block;
				font-size: 12px;
				padding: 2px 8px;
				border-radius: 10px;

				&.positive {
					background-color: rgba(46, 204, 113, 0.1);
					color: #2ecc71;
				}

				&.negative {
					background-color: rgba(255, 71, 87, 0.1);
					color: #ff4757;
				}
			}
		}

		.card-wave {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 30px;
			overflow: hidden;

			svg {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.chart-container {
		background-color: #fff;
		border-radius: 12px;
		padding: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		margin-bottom: 25px;

		.chart-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.chart-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}

			.chart-date {
				font-size: 14px;
				color: #666;
				margin-right: 5px;
			}
		}
	}

	.function-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.function-card {
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		text-align: center;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		}

		.card-icon {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 15px;
			transition: all 0.3s ease;
		}

		.card-title {
			display: block;
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
		}

		.card-desc {
			display: block;
			font-size: 12px;
			color: #999;
		}

		&:active .card-icon {
			transform: scale(0.9);
		}
	}

	.footer-wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		overflow: hidden;
		z-index: -1;

		svg {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	@media (min-width: 768px) {
		.dashboard-container {
			padding: 30px;
			max-width: 1200px;
			margin: 0 auto;
		}

		.data-board {
			grid-template-columns: repeat(3, 1fr);
		}

		.function-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}
</style>